.sync-indicator
  position: absolute
  left: -54px
  width: 30px
  height: 30px
  border-radius: 50px
  display: flex
  justify-content: center
  align-items: center
  background: #f5f5f5

  .tooltip
    right: 0
    top: 29px

  svg
    position: absolute
    top: 6px
    right: 6px

  .success-icon
    position: absolute
    top: 2px
    right: -2px
  .error-icon
    position: absolute
    top: 2px
    right: 3px

  .monochrome path
    fill: #4792ff

  .spinner,
  .spinner:after
    border-radius: 50%
    width: 26px
    height: 26px

  .spinner
    font-size: 10px
    position: relative
    border-width: 2px
    border-style: solid
    border-color: transparent
    transform: translateZ(0)

  @keyframes load
    0%
      transform: rotate(0deg)
    100%
      transform: rotate(360deg)

  &.loading
    svg
      path:nth-child(1)
        fill: #d7d7d7
      path:nth-child(2)
        fill: #c6c6c6
      path:nth-child(3)
        fill: #e9e8e6
    .spinner
      animation: load 1.1s infinite linear
      border-top: 2px solid rgba(71, 146, 255, 0.3)
      border-right: 2px solid rgba(71, 146, 255, 0.3)
      border-bottom: 2px solid rgba(71, 146, 255, 0.3)
      border-left: 2px solid rgba(71, 146, 255, 0.7)
  &.static
    .error-icon,
    .success-icon
      display: none

body[platform="macos"] .sync-indicator
  right: 15px
  left: auto
